<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../../js/constant/url.js"></script>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="css/general.css">
    <link rel="stylesheet" href="css/userManager.css">
    <title>用户管理</title>
</head>

<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <nav class="top-nav">
            <div class="nav-left">
                <div class="logo" v-if="!isMobile">
                    <a href="../../index.html">
                        <img src="../../imgs/218x60.png" alt="logo">
                    </a>
                </div>
            </div>
            <div class="nav-right">
                <div class="user-info" v-if="currentUser">
                    <span class="username">{{ currentUser.username }}</span>
                    <span class="permission-badge" :class="getPermissionClass(currentUser.permission)">
                        {{ getPermissionText(currentUser.permission) }}
                    </span>
                </div>
                <div class="nav-buttons">
                    <button class="nav-button" @click="goBack">
                        <i class="mdi mdi-arrow-left"></i>
                        <span>返回</span>
                    </button>
                    <button class="nav-button" v-if="currentUser && currentUser.permission > 0" @click="logout">
                        <i class="mdi mdi-logout"></i>
                        <span>退出</span>
                    </button>
                </div>
            </div>
        </nav>

        <!-- 管理导航 -->
        <div class="admin-nav">
            <a href="dataManager.html" class="admin-nav-item">
                <i class="mdi mdi-database"></i>
                <span>数据管理</span>
            </a>
            <a href="groupManager.html" class="admin-nav-item">
                <i class="mdi mdi-folder-multiple"></i>
                <span>分类管理</span>
            </a>
            <a href="userManager.html" class="admin-nav-item active">
                <i class="mdi mdi-account-cog"></i>
                <span>用户管理</span>
            </a>
        </div>

        <!-- 主要内容区域 -->
        <main class="admin-content">
            <!-- 头部区域 -->
            <div class="content-header">
                <div class="search-section">
                    <div class="search-box">
                        <input type="text" id="search-input" v-model="searchQuery" placeholder="输入ID、名称进行搜索"
                            @keyup.enter="search">

                        <!-- 按权限筛选 -->
                        <select v-model="selectedPermission" @change="changePermission" class="permission-search">
                            <option value="-1" selected>所有权限</option>
                            <option value="0">游客</option>
                            <option value="1">用户</option>
                            <option value="2">会员</option>
                            <option value="3">管理员</option>
                            <option value="4" v-if="currentUser.permission >= 4">超级管理员</option>
                            <option value="5" v-if="currentUser.permission >= 5">开发者</option>
                        </select>

                        <div class="search-controls">
                            <button class="search-btn" @click="search">
                                <i class="mdi mdi-magnify"></i>
                                <span>搜索</span>
                            </button>
                            <button class="reset-btn" @click="resetSearch">
                                <i class="mdi mdi-refresh"></i>
                                <span>重置</span>
                            </button>
                        </div>
                    </div>
                    <div class="search-right">
                        <p>用户数量&ensp;<span>{{ filteredUsers.length }}</span></p>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- 用户列表 -->
                <div class="data-list">
                    <div v-for="item in filteredUsers" :key="item.id" class="data-item">
                        <!-- 用户名称 -->
                        <h3>
                            <i class="mdi mdi-account"></i>
                            {{ item.username }}
                            <span style="font-size: 0.8rem;" v-if="item.remarks">（{{ item.remarks }}）</span>
                        </h3>

                        <!-- 用户id、权限 -->
                        <div class="user-info-centent1">
                            <div class="user-meta">
                                <span class="id">ID: {{ item.id }}</span>
                            </div>
                            <div>
                                <span>权限：</span><span class="permission-badge"
                                    :class="getPermissionClass(item.permission)">
                                    {{ getPermissionText(item.permission) }}
                                </span>
                            </div>
                        </div>

                        <!-- 用户邮箱 -->
                        <div class="user-info-email">
                            <div class="user-email">
                                <p>
                                    <i class="mdi mdi-email"></i>
                                    <span v-if="item.email">：{{ item.email }}</span>
                                    <span v-else=>：未绑定</span>
                                </p>
                            </div>
                        </div>

                        <!-- 用户手机号 -->
                        <div class="user-info-phone">
                            <p>
                                <i class="mdi mdi-phone"></i>
                                <span v-if="item.phone">：{{ item.phone }}</span>
                                <span v-else=>：未绑定</span>
                            </p>
                        </div>

                        <!-- 最近登录日期 -->
                        <div class="user-info-loginTime">
                            <p>
                                <i class="mdi mdi-login"></i>
                                <span>：{{ formatDate(new Date(item.logintime),"yyyy-MM-dd hh:mm:ss") }}</span>
                            </p>
                        </div>

                        <!-- 注册日期 -->
                        <div class="user-info-registerTime">
                            <p>
                                <i class="mdi mdi-calendar"></i>
                                <span>：{{ formatDate(new Date(item.recorddate),"yyyy-MM-dd hh:mm:ss") }}</span>
                            <p>
                        </div>

                        <div class="data-actions" v-if="item.id != 0">
                            <button class="action-btn collect" @click="showCollect(item)"
                                v-if="item.permission>0 && currentUser.permission >= 3">
                                <i class="mdi mdi-bookmark-box-multiple"></i>
                                <span>收藏夹</span>
                            </button>
                            <button class="action-btn edit" @click="editUser(item)"
                                v-if="currentUser && currentUser.permission >= 4">
                                <i class="mdi mdi-pencil"></i>
                                <span>编辑</span>
                            </button>
                            <button class="action-btn delete" @click="deleteUser(item)"
                                v-if="currentUser && currentUser.permission == 5">
                                <i class="mdi mdi-delete"></i>
                                <span>删除</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </main>


        <!-- Toast -->
        <div class="toast-container" v-if="toast.show">
            <div class="toast" :class="toast.type">
                {{ toast.message }}
            </div>
        </div>

        <!-- 用户收藏夹模态框 -->
        <div class="modal" v-if="showCollectModal">
            <div class="modal-content" @click.stop>
                <div class="modal-header">
                    <h2>{{ favorites.user.username }} 的收藏夹</h2>
                    <button class="close-btn" @click="closeModal">×</button>
                </div>
                <div class="modal-body">
                    <div class="favorites-list">
                        <div v-for="item in favorites.data" :key="item.id" class="favorite-item">
                            <p>数据ID: {{ item.id }}</p>
                            <h3>{{ item.name }}</h3>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <!-- 编辑用户模态框 -->
        <div class="modal" v-if="showModal">
            <div class="modal-content" @click.stop>
                <div class="modal-header">
                    <h2>编辑用户信息</h2>
                    <button class="close-btn" @click="closeModal">×</button>
                </div>

                <!-- 用户名称 -->
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">用户名称</label>
                        <input type="text" id="name" v-model="formData.username" placeholder="输入分类名称"
                            :disabled="currentUser.permission < 4? true : false" />
                    </div>
                </div>

                <!-- 备注 -->
                <div class="modal-body">
                    <div class="form-group">
                        <label for="remarks">备注</label>
                        <input type="text" id="remarks" v-model="formData.remarks" placeholder="输入备注"
                            :disabled="currentUser.permission < 4? true : false" />
                    </div>
                </div>

                <!-- 用户权限 -->
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">用户权限</label>
                        <select id="permission" v-model="formData.permission">
                            <option value="1" :selected="formData.permission == 1">用户</option>
                            <option value="2" :selected="formData.permission == 2">会员</option>
                            <option value="3" :selected="formData.permission == 3">管理员</option>
                            <option value="4" v-if="currentUser.permission >= 4" :selected="formData.permission == 4">
                                超级管理员</option>
                            <option value="5" v-if="currentUser.permission >= 5" :selected="formData.permission == 5">
                                开发者</option>
                        </select>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="modal-footer">
                    <button class="cancel-btn" @click="closeModal">取消</button>
                    <button class="save-btn" @click="saveUser">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/userManager.js"></script>
</body>

</html>